<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>wph注册</title>
	<link rel="stylesheet" href="../css/reset.css" />
	<link rel="stylesheet" type="text/css" href="../css/login.css" />
</head>
<body>
<div class="x_container">
	<div class="x_header">
		<div></div>
		<div></div>
	</div>
	<div class="x_content">
		<div class="x_register">
			<div class="top">如有账号，请登录</div>
			<input class="user" type="text"  placeholder="手机号/用户名/邮箱"/>
			<p class="user_hide">请输入登录名</p>
			<input class="pass" type="password" placeholder="密码"/>
			<p class="pass_hide">请输入密码</p>
			<div class="x_code">
				<input id='code_input' type="text" placeholder="验证码"/>
				<div id="v_container" style="width: 96px;height: 32px;"></div>
				<span id='x_code_sp'>换一换</span>
			</div>
			<p class="pass_hide code_hide">验证码有误</p>
			<div class="x_register_btn">
				<button>登录</button>
			</div>
			<div class="x_other">
				<div>
							<span class="x_other_true">
							</span>
					<span class="x_other_false"></span>
					<span class="x_other_title">记住用户名</span>
				</div>
				<div class="x_other_bottom">
							<span>
								<a href="#">忘记密码?</a>
								|
								<a href="./register.html">免费注册</a>
							</span>
				</div>
			</div>
			<!--<div class="x_third_party">-->
				<!--<p>合作网站账号登录：</p>-->
				<!--<p  class="x_third_party_title">-->
					<!--<a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a>-->
					<!--<span>更多<span></span><span></span></span>-->
				<!--</p>-->
				<!--<div class="x_third_party_hide">-->
					<!--<a href="#">网易</a>|-->
					<!--<a href="#">人人网</a>|-->
					<!--<a href="#">建行登录</a>|-->
					<!--<a href="#">财付通</a>-->
					<!--<a href="#">开心网</a>|-->
					<!--<a href="#">中国</a>|-->
					<!--<a href="#">翼支付</a>-->
				<!--</div>-->
			<!--</div>-->
		</div>
	</div>
	<p class="x_footer">
		Copyright 2008-2017 vip.com，All Rights Reserved ICP证：粤 B2-20080329
		<span id="qqLoginBtn"></span>
	</p>
</div>
</body>
<script type="text/javascript" src="../js/canvas.js"></script>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.cookie.js"></script>
<script type="text/javascript">
    $(function(){
        //=============第三方登录显示与隐藏
        //获取cook信息是否存在，存在将信息赋值给input
        if($.cookie('wph_user')){
            $('.user').val($.cookie('wph_user'));
        }
        var COOKBOOL = true; //记录选中和取消用户名
        $('.x_third_party_title>span').on('click',function(){
            if($(this).children().eq(0).css('display') == 'inline-block'){
                $(this).children().eq(0).css('display','none');
                $(this).children().eq(1).css('display','inline-block');
                $(this).parent().next().show('normal');
            }else{
                $(this).children().eq(0).css('display','inline-block');
                $(this).children().eq(1).css('display','none');
                $(this).parent().next().hide('normal');
            }
        })
        //===========登录名，密码失焦时判断value是否为空
        $('.user').blur(function(){
            if (!$(this).val()) {
                $(this).next().css('visibility','visible');
                $(this).css('border-color','#F20165')
            }else{
                $(this).next().css('visibility','hidden');
                $(this).css('border-color','#b2b2b2')
            }
        })
        $('.pass').blur(function(){
            if (!$(this).val()) {
                $(this).next().css('visibility','visible');
                $(this).css('border-color','#F20165')
            }else{
                $(this).next().css('visibility','hidden');
                $(this).css('border-color','#b2b2b2')
            }
        })
        $('.x_other_false').on('click',function(){
            $(this).css('display','none');
            $(this).prev().css('visibility','visible');
            COOKBOOL = false;
        })
        $('.x_other_true').on('click',function(){
            $(this).css('visibility','hidden');
            $(this).next().css('display','block');
            COOKBOOL = true;
        })
        //=============图形验证码
        var verifyCode = new GVerify("v_container");
        $('#x_code_sp').click(function(){
            verifyCode.refresh();
            $('#code_input').val('');
        })
        //
        $('#code_input').blur(function(){
            var res = verifyCode.validate($(this).val());
            if(res){
                $(this).css('border-color','#b2b2b2');
                $('.code_hide').css({
                    'visibility':'hidden',
                })
            }else{

                if(!$('#code_input').val()){
                    $('.code_hide').text('验证码不能为空');
                }else{
                    $('.code_hide').text('验证码有误');
                }
                $('.code_hide').css({
                    'visibility':'visible',
                })
                $(this).css('border-color','#F20165');
            }
        })
        //登录
        $('.x_register_btn button').on('click',function(){
            if($('.user').val()&&$('.pass')&&verifyCode.validate($('#code_input').val())){
                $.ajax({
                    type:'post',
                    url:'/login',
                    data:{
                        user:$('.user').val(),
                        pwd:$('.pass').val()
                    },

                    success:function (res) {
                        var res = $.parseJSON(res);
                        if(res.msg){
                            if(res.msg==1){
                                if(COOKBOOL){
                                    $.cookie('wph_user',$('.user').val(),{expries:1});
                                }
                                sessionStorage.setItem('wph_user',$('.user').val());
                                //window.location.href = 'index.html'+$('.user').val();
                                window.location.href = 'index.html';
                            }else{
                                $('.user_hide').css({
                                    'visibility':'visible',
                                    'border-color':'#F20165'
                                })
                                $('.user_hide').text('账号或者密码错误');
                                verifyCode.refresh();
                            }
                        }else{
                            $('.user_hide').css({
                                'visibility':'visible',
                                'border-color':'#F20165'
                            })
                            $('.user_hide').text('网络异常');
                            verifyCode.refresh();
                        }
                    }
                })
            }else{

                if(!$('.user').val()){
                    $('.user').next().css('visibility','visible');
                    $('.user').css('border-color','#F20165')
                }
                if(!$('.pass').val()){
                    $('.pass').next().css('visibility','visible');
                    $('.pass').css('border-color','#F20165')
                }

                if(!$('#code_input').val()){
                    $('.code_hide').text('验证码不能为空');
                }else{
                    $('.code_hide').text('验证码有误');
                }
                $('.code_hide').css({
                    'visibility':'visible',
                })
                $('#code_input').css('border-color','#F20165');
                verifyCode.refresh();
            }
        })
    })
</script>
</html>